1
00:00:00,910 --> 00:00:05,030
[音乐]

2
00:00:05,040 --> 00:00:07,190
你好，欢迎光临，我是戴夫

3
00:00:07,200 --> 00:00:09,350
教程是初学者 css 的一部分

4
00:00:09,360 --> 00:00:11,589
系列我将使用 Chrome 网络

5
00:00:11,599 --> 00:00:14,310
浏览器 Visual Studio 代码编辑器

6
00:00:14,320 --> 00:00:16,230
以及用于视觉的实时服务器扩展

7
00:00:16,240 --> 00:00:18,630
studio代码查看网页

8
00:00:18,640 --> 00:00:20,630
有这些工具启动器的链接

9
00:00:20,640 --> 00:00:23,029
代码文件和所有资源

10
00:00:23,039 --> 00:00:25,029
描述如下

11
00:00:25,039 --> 00:00:27,589
今天我们正在使用 css 选择器

12
00:00:27,599 --> 00:00:29,669
并且有三个级别的选择器

13
00:00:29,679 --> 00:00:31,509
这是我现在最常见的

14
00:00:31,519 --> 00:00:33,990
Visual Studio 代码在左侧打开

15
00:00:34,000 --> 00:00:37,510
我有一个空白的 style.css 文件

16
00:00:37,520 --> 00:00:40,869
链接到我们的 html 文件和 html

17
00:00:40,879 --> 00:00:43,190
文件已在 chrome 中打开，我正在使用

18
00:00:43,200 --> 00:00:45,110
带有视觉效果的实时服务器扩展

19
00:00:45,120 --> 00:00:47,510
工作室代码，这样我们就可以立即看到我们的

20
00:00:47,520 --> 00:00:49,430
我们页面的变化

21
00:00:49,440 --> 00:00:53,510
html页面的结构有一个h1

22
00:00:53,520 --> 00:00:56,389
标题和之后我们有三个

23
00:00:56,399 --> 00:00:58,950
文章 每篇文章都有自己的 h2

24
00:00:58,960 --> 00:01:01,590
里面的标题和段落

25
00:01:01,600 --> 00:01:03,590
所以当我们谈论这三种不同的

26
00:01:03,600 --> 00:01:06,149
css 中基本选择器的类型让我们

27
00:01:06,159 --> 00:01:08,870
从最常见的开始

28
00:01:08,880 --> 00:01:11,510
元素选择器，我要选择

29
00:01:11,520 --> 00:01:13,750
body 元素现在只有一个

30
00:01:13,760 --> 00:01:16,310
每页的 body 元素，但我们有一些

31
00:01:16,320 --> 00:01:19,910
字体很小，我会了解更多

32
00:01:19,920 --> 00:01:22,469
每个声明的属性

33
00:01:22,479 --> 00:01:24,230
当我们学习教程时，但我要去

34
00:01:24,240 --> 00:01:27,109
今天仅举几个例子

35
00:01:27,119 --> 00:01:29,670
我要把字体大小设置为 22

36
00:01:29,680 --> 00:01:33,190
像素并保存现在我们可以看到它的制作

37
00:01:33,200 --> 00:01:36,469
我们页面上的所有文字都更大并且

38
00:01:36,479 --> 00:01:38,710
这是由于继承造成的，所以这些

39
00:01:38,720 --> 00:01:41,429
其他元素实际上继承自

40
00:01:41,439 --> 00:01:44,069
身体元素，我们将深入了解

41
00:01:44,079 --> 00:01:46,149
继承也只是一点点，但是

42
00:01:46,159 --> 00:01:47,190
这个

43
00:01:47,200 --> 00:01:49,830
现在它本身就是一个元素选择器

44
00:01:49,840 --> 00:01:51,990
每页只有一个 body 元素

45
00:01:52,000 --> 00:01:54,870
但假设我继续选择了

46
00:01:54,880 --> 00:01:57,990
使用段落选择器的段落

47
00:01:58,000 --> 00:02:00,789
现在我可以设置文本的颜色

48
00:02:00,799 --> 00:02:02,469
我要设置的颜色

49
00:02:02,479 --> 00:02:04,149
文字变成紫色

50
00:02:04,159 --> 00:02:07,270
我会保存并注意到它改变了一切

51
00:02:07,280 --> 00:02:10,309
我们的三段要紫色所以

52
00:02:10,319 --> 00:02:12,550
元素选择器选择所有

53
00:02:12,560 --> 00:02:15,350
该类型的元素，因此只需指定

54
00:02:15,360 --> 00:02:18,869
p 为段落元素选择

55
00:02:18,879 --> 00:02:21,270
所有段落元素现在是第二个

56
00:02:21,280 --> 00:02:23,990
选择器的类型是一个类，所以让我们

57
00:02:24,000 --> 00:02:26,550
定义一个我要的类选择器

58
00:02:26,560 --> 00:02:29,190
称这个类为灰色，注意该类

59
00:02:29,200 --> 00:02:31,589
从您之前的一个句号开始

60
00:02:31,599 --> 00:02:33,430
为班级命名，您可以选择

61
00:02:33,440 --> 00:02:35,589
类的名称，但要确保它使

62
00:02:35,599 --> 00:02:36,470
感觉

63
00:02:36,480 --> 00:02:38,150
并记住您编写的代码

64
00:02:38,160 --> 00:02:40,550
别人读不只是你自己好不好

65
00:02:40,560 --> 00:02:42,390
在这里面我要设置

66
00:02:42,400 --> 00:02:45,110
颜色到灰色对我来说有意义

67
00:02:45,120 --> 00:02:48,790
现在我将保存它并注意段落

68
00:02:48,800 --> 00:02:51,830
2和3变成灰色并且如果

69
00:02:51,840 --> 00:02:53,990
我们看一下我们的 html，它有点

70
00:02:54,000 --> 00:02:56,470
这里很拥挤，但如果我向下滚动

71
00:02:56,480 --> 00:02:58,790
对于第二段，我们有一个

72
00:02:58,800 --> 00:02:59,830
类

73
00:02:59,840 --> 00:03:03,110
在该段落上设置等于灰色

74
00:03:03,120 --> 00:03:05,830
同样，我们有一个类集等于

75
00:03:05,840 --> 00:03:08,869
第三段也是灰色的

76
00:03:08,879 --> 00:03:11,750
类可以多次使用并且

77
00:03:11,760 --> 00:03:13,350
它们非常有用，这样你就可以

78
00:03:13,360 --> 00:03:15,350
创建您可以应用的样式

79
00:03:15,360 --> 00:03:17,110
整个项目或整个项目

80
00:03:17,120 --> 00:03:19,750
您的页面，然后它们可以被重复使用

81
00:03:19,760 --> 00:03:21,670
具有多个元素和注释

82
00:03:21,680 --> 00:03:24,869
课程比选择更具体

83
00:03:24,879 --> 00:03:27,670
例如所有段落，因为

84
00:03:27,680 --> 00:03:30,550
他们更具体，他们否决了

85
00:03:30,560 --> 00:03:32,309
我们为所有人准备的紫色设置

86
00:03:32,319 --> 00:03:35,350
段落，现在灰色应用于这些

87
00:03:35,360 --> 00:03:37,750
最后两段，我们将

88
00:03:37,760 --> 00:03:40,710
还更详细地讨论特异性

89
00:03:40,720 --> 00:03:42,390
现在也只需几分钟

90
00:03:42,400 --> 00:03:44,710
类是最常见的类型

91
00:03:44,720 --> 00:03:46,630
带CSS的选择器

92
00:03:46,640 --> 00:03:48,470
但更具体的

93
00:03:48,480 --> 00:03:51,830
选择器 Yet 是一个 id 选择器并且 i

94
00:03:51,840 --> 00:03:54,949
有一个名为第二个 id 属性的 id

95
00:03:54,959 --> 00:03:57,910
在 html 里面，我要

96
00:03:57,920 --> 00:04:01,509
应用字体样式，我们将其设置为

97
00:04:01,519 --> 00:04:02,789
斜体

98
00:04:02,799 --> 00:04:05,350
我喜欢事后有一个空间

99
00:04:05,360 --> 00:04:07,350
现在我将保存并注意第二个

100
00:04:07,360 --> 00:04:11,030
段落也变成斜体，所以它

101
00:04:11,040 --> 00:04:12,630
具体来说

102
00:04:12,640 --> 00:04:16,310
现在处理第二段 ids

103
00:04:16,320 --> 00:04:18,870
html 中只能存在一次

104
00:04:18,880 --> 00:04:20,949
文档中它们应该是唯一的

105
00:04:20,959 --> 00:04:24,310
然而这不是一个好习惯

106
00:04:24,320 --> 00:04:28,469
现在真的在你的CSS中使用ids了

107
00:04:28,479 --> 00:04:31,670
将验证您的代码没有问题

108
00:04:31,680 --> 00:04:33,430
使用 ID

109
00:04:33,440 --> 00:04:36,230
但通常你应该使用类

110
00:04:36,240 --> 00:04:38,950
有时还有元素选择器，但是

111
00:04:38,960 --> 00:04:41,590
很少（如果有的话）你应该使用 id

112
00:04:41,600 --> 00:04:44,310
你的CSS里面有选择器

113
00:04:44,320 --> 00:04:46,550
其他有效用途（如果您还记得的话）

114
00:04:46,560 --> 00:04:50,150
html 将表单输入链接回

115
00:04:50,160 --> 00:04:52,469
标签元素，然后随着你的学习

116
00:04:52,479 --> 00:04:54,550
javascript 你可能还有其他用途

117
00:04:54,560 --> 00:04:57,030
对于 id 属性也是如此，但我们尝试

118
00:04:57,040 --> 00:04:59,749
让它们远离 CSS 现在我们已经

119
00:04:59,759 --> 00:05:01,670
涵盖了三种基本类型

120
00:05:01,680 --> 00:05:03,830
选择器让我们讨论一下你能做什么

121
00:05:03,840 --> 00:05:06,230
其中一些只是多一点点

122
00:05:06,240 --> 00:05:09,110
所以让我们把 h1 放在这里并设置

123
00:05:09,120 --> 00:05:12,230
h1 的颜色为蓝色

124
00:05:12,240 --> 00:05:14,230
我们会保存并且只能看到它

125
00:05:14,240 --> 00:05:17,270
选择了 h1 我们只有一个 h1

126
00:05:17,280 --> 00:05:20,150
我们的页面，但我们也可以对选择器进行分组

127
00:05:20,160 --> 00:05:23,270
所以让我们将所有的 h2 也设置为

128
00:05:23,280 --> 00:05:26,070
蓝色，你可以看到我只是加了一个逗号

129
00:05:26,080 --> 00:05:27,830
之间 和 然后

130
00:05:27,840 --> 00:05:30,390
该声明或该规则规定

131
00:05:30,400 --> 00:05:32,390
如果我们有更多规则，则整个规则集

132
00:05:32,400 --> 00:05:35,029
在这里我应该说更多的声明

133
00:05:35,039 --> 00:05:38,710
它适用于 h1 和 h2

134
00:05:38,720 --> 00:05:41,749
这样你就可以继续对选择器进行分组

135
00:05:41,759 --> 00:05:43,749
中间有一个逗号现在注意什么

136
00:05:43,759 --> 00:05:46,550
如果我删除逗号并保存，就会发生

137
00:05:46,560 --> 00:05:49,830
本声明或我们的完整规则集

138
00:05:49,840 --> 00:05:51,909
特别是如果我们有更多声明

139
00:05:51,919 --> 00:05:54,550
这些都不适用于 h1 或

140
00:05:54,560 --> 00:05:56,469
h2 现在这是怎么回事

141
00:05:56,479 --> 00:05:59,909
选择器正在寻找任何符合以下条件的 h2：

142
00:05:59,919 --> 00:06:03,350
存在于 h1 内部，它不可见

143
00:06:03,360 --> 00:06:06,390
对于 h1 或 h2 它只是寻找

144
00:06:06,400 --> 00:06:10,469
h2 存在或嵌套（如果您愿意）

145
00:06:10,479 --> 00:06:13,029
在 h1 里面所以这就是为什么

146
00:06:13,039 --> 00:06:15,430
没用，了解一下可能有用

147
00:06:15,440 --> 00:06:17,830
未来但我们需要的是

148
00:06:17,840 --> 00:06:20,230
中间有逗号，然后我们可以选择

149
00:06:20,240 --> 00:06:24,309
页面上的 h1 和所有 h2

150
00:06:24,319 --> 00:06:26,070
这个规则集让我们看一下

151
00:06:26,080 --> 00:06:28,070
我们将选择的示例

152
00:06:28,080 --> 00:06:30,790
元素位于另一个元素内部，所以

153
00:06:30,800 --> 00:06:32,629
让我们从段落元素开始

154
00:06:32,639 --> 00:06:35,029
再次，现在我们将寻找任何跨度

155
00:06:35,039 --> 00:06:37,029
里面的元素

156
00:06:37,039 --> 00:06:39,749
任何段落元素，在这里让我们设置

157
00:06:39,759 --> 00:06:42,629
几个值，所以我们将设置

158
00:06:42,639 --> 00:06:43,990
文本破折号

159
00:06:44,000 --> 00:06:45,590
变换

160
00:06:45,600 --> 00:06:47,590
我要选择

161
00:06:47,600 --> 00:06:50,390
这里大写然后我也去

162
00:06:50,400 --> 00:06:53,350
设置背景

163
00:06:53,360 --> 00:06:54,870
颜色

164
00:06:54,880 --> 00:06:57,350
让我们将其设置为金色，这样就可以了

165
00:06:57,360 --> 00:06:59,350
我们本质上是在强调什么

166
00:06:59,360 --> 00:07:02,390
我们想要看到，现在我们可以看到

167
00:07:02,400 --> 00:07:04,950
我们已经设置了这个词，无论这个词是什么

168
00:07:04,960 --> 00:07:07,749
这是来自我们的 lorem Epson 的拉丁语吗

169
00:07:07,759 --> 00:07:10,550
我们将其设置为大写并且与

170
00:07:10,560 --> 00:07:14,390
epsom 然后我们也把黄金放在后面

171
00:07:14,400 --> 00:07:16,710
这些词中的每一个都带有这个然而

172
00:07:16,720 --> 00:07:18,790
这没有多大意义，这是

173
00:07:18,800 --> 00:07:21,350
一个更好的例子说明我们应该在哪里

174
00:07:21,360 --> 00:07:24,790
使用一个我们可以命名为我们的类的类

175
00:07:24,800 --> 00:07:26,629
类似的东西

176
00:07:26,639 --> 00:07:28,629
突出显示

177
00:07:28,639 --> 00:07:32,390
然后将其应用到我们的 span 元素上

178
00:07:32,400 --> 00:07:33,670
里面

179
00:07:33,680 --> 00:07:36,870
索引的所以我们来到这里并且

180
00:07:36,880 --> 00:07:38,950
找到我们的跨度

181
00:07:38,960 --> 00:07:42,469
我会选择这两个

182
00:07:42,479 --> 00:07:49,909
然后我们可以添加班级亮点

183
00:07:49,919 --> 00:07:51,909
如果我拼写的话，这使得它可以重复使用

184
00:07:51,919 --> 00:07:54,869
正确突出显示我们去保存

185
00:07:54,879 --> 00:07:57,670
现在它再次被应用但是这个

186
00:07:57,680 --> 00:08:00,950
会让我们的 CSS 更有条理

187
00:08:00,960 --> 00:08:03,589
实际上更可重用

188
00:08:03,599 --> 00:08:05,589
这种方式很灵活，因为我们可能有

189
00:08:05,599 --> 00:08:08,070
一些 span 元素做其他事情

190
00:08:08,080 --> 00:08:10,230
我们不想申请

191
00:08:10,240 --> 00:08:12,790
这个规则也设定了，现在是最后一个

192
00:08:12,800 --> 00:08:15,350
选择器来讨论它存在我们

193
00:08:15,360 --> 00:08:18,550
不会经常使用它，但它是

194
00:08:18,560 --> 00:08:21,430
通用选择器，这意味着它是

195
00:08:21,440 --> 00:08:24,390
选择页面上的所有内容

196
00:08:24,400 --> 00:08:26,070
通常只看到这个

197
00:08:26,080 --> 00:08:28,550
称为 CSS 重置，我们将在其中介绍

198
00:08:28,560 --> 00:08:30,309
未来，但只是让你知道

199
00:08:30,319 --> 00:08:33,829
存在这会选择所有内容，所以让我们

200
00:08:33,839 --> 00:08:36,230
想想我们可以在这里应用什么

201
00:08:36,240 --> 00:08:38,949
这将适用于一切

202
00:08:38,959 --> 00:08:41,670
所以让我们改变字体

203
00:08:41,680 --> 00:08:44,310
我们将其设置为单色空格字体

204
00:08:44,320 --> 00:08:46,630
并保存，现在您可以看到所有

205
00:08:46,640 --> 00:08:48,389
页面上的文字

206
00:08:48,399 --> 00:08:51,190
变成这个等宽字体

207
00:08:51,200 --> 00:08:53,509
我们现在拥有的默认字体是这样的

208
00:08:53,519 --> 00:08:55,269
不是我们再次使用它的方式

209
00:08:55,279 --> 00:08:57,910
未来我们将学习CSS重置

210
00:08:57,920 --> 00:09:00,070
会使用该选择器但是

211
00:09:00,080 --> 00:09:02,150
通常这是您唯一一次看到

212
00:09:02,160 --> 00:09:05,030
使用了通用选择器，好吧，让我们

213
00:09:05,040 --> 00:09:07,269
讨论级联

214
00:09:07,279 --> 00:09:10,310
css 是层叠样式的缩写

215
00:09:10,320 --> 00:09:12,550
Sheets 本质上就是 css

216
00:09:12,560 --> 00:09:14,790
就像瀑布一样，它从

217
00:09:14,800 --> 00:09:17,990
自上而下这意味着如果我要放

218
00:09:18,000 --> 00:09:20,310
在另一个定义中我将复制

219
00:09:20,320 --> 00:09:22,710
这是段落和我们在哪里

220
00:09:22,720 --> 00:09:23,590
有

221
00:09:23,600 --> 00:09:26,470
我们第一段的紫色

222
00:09:26,480 --> 00:09:28,389
它确实适用于除此之外的所有人

223
00:09:28,399 --> 00:09:31,110
当然，灰色类会覆盖该类

224
00:09:31,120 --> 00:09:32,470
最后两个

225
00:09:32,480 --> 00:09:35,190
但如果我来这里说

226
00:09:35,200 --> 00:09:37,829
红色而不是紫色

227
00:09:37,839 --> 00:09:39,750
注意这一段

228
00:09:39,760 --> 00:09:42,389
变红，那是因为

229
00:09:42,399 --> 00:09:46,710
它最后读取这个规则集，所以首先读取CSS

230
00:09:46,720 --> 00:09:48,870
从顶部看它开始于

231
00:09:48,880 --> 00:09:51,350
顶部，它向下工作，所以

232
00:09:51,360 --> 00:09:53,990
它最后读到的本质上是

233
00:09:54,000 --> 00:09:57,110
最后一条规则，这意味着无论

234
00:09:57,120 --> 00:10:00,550
它最后读取的定义将是

235
00:10:00,560 --> 00:10:03,829
现在应用特异性可以覆盖

236
00:10:03,839 --> 00:10:05,590
这就是我们谈论的地方

237
00:10:05,600 --> 00:10:08,710
元素然后类类是

238
00:10:08,720 --> 00:10:11,030
更具体的例如

239
00:10:11,040 --> 00:10:13,350
不仅仅是一个元素选择器，所以我们有

240
00:10:13,360 --> 00:10:16,470
我们班的颜色是灰色

241
00:10:16,480 --> 00:10:19,269
现在如果我们

242
00:10:19,279 --> 00:10:22,230
删除这个类并保存

243
00:10:22,240 --> 00:10:24,790
现在它们都红了，但尽管如此

244
00:10:24,800 --> 00:10:26,550
我们正在研究级联

245
00:10:26,560 --> 00:10:29,269
从上到下开始即使我把

246
00:10:29,279 --> 00:10:31,509
上面这个类

247
00:10:31,519 --> 00:10:34,310
段落选择器并保存

248
00:10:34,320 --> 00:10:36,230
它仍然适用于最后两个

249
00:10:36,240 --> 00:10:38,710
段落，因为它有更多

250
00:10:38,720 --> 00:10:40,389
特异性

251
00:10:40,399 --> 00:10:42,870
比元素选择器和元素

252
00:10:42,880 --> 00:10:45,910
这里的选择器当然是紫色的

253
00:10:45,920 --> 00:10:47,190
被覆盖

254
00:10:47,200 --> 00:10:49,269
最后一条规则是元素

255
00:10:49,279 --> 00:10:51,350
这里选择红色，所以我们开始

256
00:10:51,360 --> 00:10:53,750
加上一个红色的段落，真的是

257
00:10:53,760 --> 00:10:56,790
适用于所有段落，除了

258
00:10:56,800 --> 00:10:57,670
然后

259
00:10:57,680 --> 00:11:01,110
css 看到应用了灰色类

260
00:11:01,120 --> 00:11:03,509
第二段和第三段以及

261
00:11:03,519 --> 00:11:05,990
具有更多的特异性，所以它

262
00:11:06,000 --> 00:11:09,430
否决元素设置的任何内容

263
00:11:09,440 --> 00:11:11,829
选择器现在你可能遇到的一个问题是

264
00:11:11,839 --> 00:11:14,630
当你有一个大的 css 文件时，也许

265
00:11:14,640 --> 00:11:17,430
你已经在这些上设置了这个灰色等级

266
00:11:17,440 --> 00:11:20,310
段落，然后假设你是

267
00:11:20,320 --> 00:11:23,030
向下几百行

268
00:11:23,040 --> 00:11:25,269
您正在为段落设置颜色

269
00:11:25,279 --> 00:11:27,430
你不明白为什么不是

270
00:11:27,440 --> 00:11:29,910
正在应用，所以让我们继续

271
00:11:29,920 --> 00:11:32,949
在这里展开 chrome 就可以了

272
00:11:32,959 --> 00:11:35,670
单击并选择检查

273
00:11:35,680 --> 00:11:38,310
一旦你检查你的页面

274
00:11:38,320 --> 00:11:40,230
然后你可以看看不同的

275
00:11:40,240 --> 00:11:43,030
应用的类和 CSS 规则

276
00:11:43,040 --> 00:11:44,870
这是一个很好的例子

277
00:11:44,880 --> 00:11:47,030
突出显示了我们的第三段

278
00:11:47,040 --> 00:11:49,269
在元素选项卡中

279
00:11:49,279 --> 00:11:52,150
然后我们看看样式

280
00:11:52,160 --> 00:11:55,350
我们可以看到我们有段落规则

281
00:11:55,360 --> 00:11:57,350
这里是这些元素选择器，但是颜色

282
00:11:57,360 --> 00:12:00,470
紫色被划掉，然后涂成红色

283
00:12:00,480 --> 00:12:03,509
被划掉了，所以 css 知道这些规则

284
00:12:03,519 --> 00:12:05,750
段落存在集合，但它也

285
00:12:05,760 --> 00:12:08,230
知道它应该遵循最重要的

286
00:12:08,240 --> 00:12:11,190
具体使用特殊性规则

287
00:12:11,200 --> 00:12:13,990
所以这里我们有一个灰色的颜色

288
00:12:14,000 --> 00:12:16,310
正在应用，以便您可以看到

289
00:12:16,320 --> 00:12:17,910
有时当你陷入困境时

290
00:12:17,920 --> 00:12:20,230
你的CSS和你已经写了一个规则并且

291
00:12:20,240 --> 00:12:22,790
你不明白为什么它不是

292
00:12:22,800 --> 00:12:25,110
正在申请你应该检查你的

293
00:12:25,120 --> 00:12:27,670
使用开发工具编写代码，然后再一次

294
00:12:27,680 --> 00:12:29,910
右键单击并选择检查要做的事情

295
00:12:29,920 --> 00:12:31,829
然后就转到正确的地方

296
00:12:31,839 --> 00:12:33,350
选项卡元素

297
00:12:33,360 --> 00:12:35,509
突出显示您想要查看的元素

298
00:12:35,519 --> 00:12:37,990
查看样式，您就会看到它是怎样的

299
00:12:38,000 --> 00:12:40,870
被浏览器中的 css 读取或如何读取

300
00:12:40,880 --> 00:12:43,590
浏览器正在读取你的CSS，然后

301
00:12:43,600 --> 00:12:45,509
看看这些规则集是如何进行的

302
00:12:45,519 --> 00:12:47,750
应用哪些被覆盖

303
00:12:47,760 --> 00:12:49,190
以及哪些实际上正在被

304
00:12:49,200 --> 00:12:51,590
申请了，好的，我要结束它了

305
00:12:51,600 --> 00:12:54,150
现在我将调整 chrome 的大小，以便我来

306
00:12:54,160 --> 00:12:56,069
回到我们的风格，一旦我们

307
00:12:56,079 --> 00:12:57,670
到顶部让我们谈谈

308
00:12:57,680 --> 00:13:00,389
当我进入特异性a时继承

309
00:13:00,399 --> 00:13:02,949
已经有一点了，但继承

310
00:13:02,959 --> 00:13:04,470
那就是那里

311
00:13:04,480 --> 00:13:07,829
另一个元素继承设置

312
00:13:07,839 --> 00:13:11,110
来自或其父级的属性

313
00:13:11,120 --> 00:13:14,710
元素，因此 body 元素是其父元素

314
00:13:14,720 --> 00:13:17,269
这里的所有其他元素，所以当我们

315
00:13:17,279 --> 00:13:19,590
设置字体大小所有其他

316
00:13:19,600 --> 00:13:22,790
元素现在继承了该字体大小

317
00:13:22,800 --> 00:13:25,190
通常与字体或相关的任何内容

318
00:13:25,200 --> 00:13:26,550
版式

319
00:13:26,560 --> 00:13:29,030
是继承的并且可以包括一些东西

320
00:13:29,040 --> 00:13:31,990
就像颜色线高度对齐一样

321
00:13:32,000 --> 00:13:34,150
处理字体的各种设置

322
00:13:34,160 --> 00:13:36,230
和排版无论如何

323
00:13:36,240 --> 00:13:38,310
与那些不相关的属性

324
00:13:38,320 --> 00:13:40,949
事物不会遗传，我知道

325
00:13:40,959 --> 00:13:42,230
那只需要一点点

326
00:13:42,240 --> 00:13:44,629
当你了解更多的时候就会习惯

327
00:13:44,639 --> 00:13:47,829
css 例如这个字体大小是

328
00:13:47,839 --> 00:13:50,230
继承了，但我们可以采用另一个设置

329
00:13:50,240 --> 00:13:52,550
put 是一个边框，我会放三个

330
00:13:52,560 --> 00:13:55,910
像素，因此很容易看到纯黑色

331
00:13:55,920 --> 00:13:59,110
我现在保存它，注意边界

332
00:13:59,120 --> 00:14:01,990
只绕过了 body 元素

333
00:14:02,000 --> 00:14:04,069
并不适用于所有其他元素

334
00:14:04,079 --> 00:14:07,030
在身体内部，这是一个例子

335
00:14:07,040 --> 00:14:09,509
一些不是遗传的东西我会

336
00:14:09,519 --> 00:14:11,430
现在我们再次删除它

337
00:14:11,440 --> 00:14:13,509
确实简短地谈到了普遍性

338
00:14:13,519 --> 00:14:15,590
选择器让我返回并显示

339
00:14:15,600 --> 00:14:18,389
你认为这不是继承，这是

340
00:14:18,399 --> 00:14:22,069
实际上选择所有元素，所以在这里

341
00:14:22,079 --> 00:14:24,150
如果我说边界

342
00:14:24,160 --> 00:14:27,509
我将放置一个像素纯红色

343
00:14:27,519 --> 00:14:30,629
请注意，它确实适用于所有

344
00:14:30,639 --> 00:14:32,710
元素那是因为我们选择了所有

345
00:14:32,720 --> 00:14:35,269
这里的元素所以设置一些东西

346
00:14:35,279 --> 00:14:38,790
这里用通用选择器不是

347
00:14:38,800 --> 00:14:41,189
真的会导致继承

348
00:14:41,199 --> 00:14:43,509
因为它实际上选择了所有

349
00:14:43,519 --> 00:14:45,750
元素本身好吧我会删除

350
00:14:45,760 --> 00:14:47,670
再次通用选择器，但得到

351
00:14:47,680 --> 00:14:50,389
回到整体的继承

352
00:14:50,399 --> 00:14:52,870
这非常方便，因为它可以保持

353
00:14:52,880 --> 00:14:55,910
我们避免在其他地方编写重复的代码

354
00:14:55,920 --> 00:14:58,310
换句话说，它使我们的代码保持干燥，这是一个

355
00:14:58,320 --> 00:15:00,150
代表“不重复”的缩写

356
00:15:00,160 --> 00:15:02,389
你自己，所以我们想写更少的代码

357
00:15:02,399 --> 00:15:04,949
并更加高效和传承

358
00:15:04,959 --> 00:15:07,750
帮助我们做到这一点，但现在有些事情不是

359
00:15:07,760 --> 00:15:09,350
就像我提到的边界一样继承

360
00:15:09,360 --> 00:15:12,550
也将是其中之一

361
00:15:12,560 --> 00:15:15,030
不继承说字体大小和

362
00:15:15,040 --> 00:15:17,509
其他排版设置，这样就不会

363
00:15:17,519 --> 00:15:19,350
是那么不寻常

364
00:15:19,360 --> 00:15:21,269
看到这样的东西

365
00:15:21,279 --> 00:15:25,750
拿一个按钮，让我们说一个输入

366
00:15:25,760 --> 00:15:28,150
文本区域，让我看看我是否要离开

367
00:15:28,160 --> 00:15:30,790
可能还有其他选择

368
00:15:30,800 --> 00:15:33,430
类似的事情我们可能会看到

369
00:15:33,440 --> 00:15:37,030
字体并将其设置为继承

370
00:15:37,040 --> 00:15:39,670
会继续制作这些元素

371
00:15:39,680 --> 00:15:42,470
继承字体设置，因为只是一个

372
00:15:42,480 --> 00:15:44,790
请记住，表单元素不

373
00:15:44,800 --> 00:15:47,430
通常会继承这些字体设置

374
00:15:47,440 --> 00:15:49,590
但现在要利用继承

375
00:15:49,600 --> 00:15:52,150
并编写我们可以使用主体的干代码

376
00:15:52,160 --> 00:15:54,870
每页仅出现一次的元素

377
00:15:54,880 --> 00:15:57,749
或者我们可以使用 html 元素

378
00:15:57,759 --> 00:15:59,670
两者都可以

379
00:15:59,680 --> 00:16:01,749
通常如果你刚刚开始

380
00:16:01,759 --> 00:16:03,509
记住最好是

381
00:16:03,519 --> 00:16:05,350
只用身体

382
00:16:05,360 --> 00:16:08,310
我经常使用 html 元素

383
00:16:08,320 --> 00:16:09,910
因为再次传承

384
00:16:09,920 --> 00:16:12,389
在那里应用，所以我们可以在这里保存

385
00:16:12,399 --> 00:16:14,470
现在看不出有什么区别我就走了

386
00:16:14,480 --> 00:16:16,710
提前并在 html 中应用它一次

387
00:16:16,720 --> 00:16:19,509
我们再次使用更大的字体，因为

388
00:16:19,519 --> 00:16:22,150
对我来说至少有一些具体的

389
00:16:22,160 --> 00:16:24,870
身体的设置，我喜欢看到

390
00:16:24,880 --> 00:16:27,509
这些是分开的，所以我经常把我所有的

391
00:16:27,519 --> 00:16:30,629
html 选择器中的字体设置，但是

392
00:16:30,639 --> 00:16:32,870
再次，任一者都可以互相工作

393
00:16:32,880 --> 00:16:36,150
我有时使用的元素选择器

394
00:16:36,160 --> 00:16:38,790
是主要元素，它是语义

395
00:16:38,800 --> 00:16:40,629
元素并且它应该只出现一次

396
00:16:40,639 --> 00:16:42,629
每页但你必须意识到

397
00:16:42,639 --> 00:16:44,870
你只是在选择这些东西

398
00:16:44,880 --> 00:16:47,189
在主要元素内部，所以如果我们看

399
00:16:47,199 --> 00:16:50,230
在我们的页面上，我在 a 中添加了 h1

400
00:16:50,240 --> 00:16:52,310
header 元素而不是在

401
00:16:52,320 --> 00:16:54,790
主要元素所以如果我要改变

402
00:16:54,800 --> 00:16:56,389
字体系列

403
00:16:56,399 --> 00:16:58,550
在我们的主选择器和 i 里面

404
00:16:58,560 --> 00:17:01,110
将其更改为单一空间，这很容易

405
00:17:01,120 --> 00:17:02,949
看到变化

406
00:17:02,959 --> 00:17:05,909
继续保存你就可以看到

407
00:17:05,919 --> 00:17:08,150
所有文章都切换到单声道

408
00:17:08,160 --> 00:17:10,710
空间，但我们的 h1 标题仍在使用

409
00:17:10,720 --> 00:17:13,029
另一种字体可以回到

410
00:17:13,039 --> 00:17:15,029
特异性只是我们谈论的事情

411
00:17:15,039 --> 00:17:17,590
关于这里的快速审查元素

412
00:17:17,600 --> 00:17:19,990
选择器是最不具体的

413
00:17:20,000 --> 00:17:22,069
然后类选择器更多

414
00:17:22,079 --> 00:17:24,549
具体然后虽然我们不想要

415
00:17:24,559 --> 00:17:27,590
要在我们的 css 中使用它们，id 选择器是

416
00:17:27,600 --> 00:17:29,990
甚至比那更具体

417
00:17:30,000 --> 00:17:32,390
有时有些事情不顺利

418
00:17:32,400 --> 00:17:34,150
你想弄清楚为什么

419
00:17:34,160 --> 00:17:35,990
没有成功或者你就是做不到

420
00:17:36,000 --> 00:17:38,310
弄清楚了，你会感到沮丧，我是

421
00:17:38,320 --> 00:17:39,750
会向你展示一些东西

422
00:17:39,760 --> 00:17:42,230
工作，但我会推荐你

423
00:17:42,240 --> 00:17:44,630
不要使用它，它是一种核

424
00:17:44,640 --> 00:17:46,789
选项如果你愿意的话，那就是放一个

425
00:17:46,799 --> 00:17:49,590
感叹号并现在重要

426
00:17:49,600 --> 00:17:51,990
看看红色应该如何应用到这个

427
00:17:52,000 --> 00:17:54,789
第一段但有重要的内容

428
00:17:54,799 --> 00:17:57,430
在我们的紫色设置之后就在这里标记

429
00:17:57,440 --> 00:17:59,430
现在我保存了

430
00:17:59,440 --> 00:18:01,029
注意发生了什么

431
00:18:01,039 --> 00:18:03,110
它把第一段变成了紫色

432
00:18:03,120 --> 00:18:05,190
注意还发生了什么，它也变成了

433
00:18:05,200 --> 00:18:06,950
第二段和第三段

434
00:18:06,960 --> 00:18:09,830
紫色款现在为什么这么好

435
00:18:09,840 --> 00:18:12,549
这个重要的基本上是废墟

436
00:18:12,559 --> 00:18:15,110
其他一切都凌驾于一切之上

437
00:18:15,120 --> 00:18:16,070
所以

438
00:18:16,080 --> 00:18:17,909
真的，当你在代码中看到它时，它很友善

439
00:18:17,919 --> 00:18:19,990
表明情况不太好

440
00:18:20,000 --> 00:18:22,470
组织有序或者草率只有一个

441
00:18:22,480 --> 00:18:24,789
您真正想要使用的几个原因

442
00:18:24,799 --> 00:18:27,110
这我觉得我的意思是我很犹豫

443
00:18:27,120 --> 00:18:28,950
甚至展示它，因为我觉得

444
00:18:28,960 --> 00:18:31,909
然而初学者可能会滥用这个

445
00:18:31,919 --> 00:18:33,669
你会在某个地方看到它我只想要你

446
00:18:33,679 --> 00:18:35,510
知道它存在

447
00:18:35,520 --> 00:18:37,510
不要使用它不要使用它你需要

448
00:18:37,520 --> 00:18:39,909
学习如何组织你的代码并

449
00:18:39,919 --> 00:18:43,110
正确应用它并且仅在您完成之后

450
00:18:43,120 --> 00:18:46,710
CSS学得足够好，能够理解

451
00:18:46,720 --> 00:18:49,270
何时使用那个重要的标志

452
00:18:49,280 --> 00:18:50,789
你唯一应该使用它的时候

453
00:18:50,799 --> 00:18:52,950
真的不应该放弃奋斗

454
00:18:52,960 --> 00:18:55,029
你会在奋斗中学到更多

455
00:18:55,039 --> 00:18:58,070
学习如何应用这些选择器

456
00:18:58,080 --> 00:18:59,990
正确的方法而不使用它

457
00:19:00,000 --> 00:19:02,230
我确实想向你展示一个重要的标志

458
00:19:02,240 --> 00:19:04,630
会帮助你学习的东西

459
00:19:04,640 --> 00:19:07,190
是特异性计算器，我会

460
00:19:07,200 --> 00:19:09,190
在您的资源中提供指向此内容的链接

461
00:19:09,200 --> 00:19:10,789
可以看到他们有一些

462
00:19:10,799 --> 00:19:12,710
这里的基本值已经是

463
00:19:12,720 --> 00:19:14,710
相当复杂，但你可以归零

464
00:19:14,720 --> 00:19:16,470
这些你可以比较两个

465
00:19:16,480 --> 00:19:19,430
选择器来了解他们为什么工作

466
00:19:19,440 --> 00:19:21,750
以及为什么他们不工作或者为什么一个

467
00:19:21,760 --> 00:19:23,750
否决另一个你可以看到

468
00:19:23,760 --> 00:19:26,549
h2 的元素选择器有一个

469
00:19:26,559 --> 00:19:28,870
得分为 0 0 1

470
00:19:28,880 --> 00:19:31,990
但如果我把我的灰色类别放进去，它就会

471
00:19:32,000 --> 00:19:35,270
得分为 0 1 0 即 10

472
00:19:35,280 --> 00:19:37,350
哪个分数更高

473
00:19:37,360 --> 00:19:41,110
比 1 所以该类否决了

474
00:19:41,120 --> 00:19:43,510
元素选择器，同样如果我们把

475
00:19:43,520 --> 00:19:45,750
在 id 选择器中

476
00:19:45,760 --> 00:19:47,350
就像我们有第二个一样

477
00:19:47,360 --> 00:19:50,870
它的得分为 100 分以上 10 分，所以

478
00:19:50,880 --> 00:19:52,789
现在更好了，你可以申请更多

479
00:19:52,799 --> 00:19:54,870
比一个类例如一个元素

480
00:19:54,880 --> 00:19:56,549
那么让我们看看如果我们有一个会发生什么

481
00:19:56,559 --> 00:19:58,390
第二节课，我们有我们的亮点

482
00:19:58,400 --> 00:19:59,430
类

483
00:19:59,440 --> 00:20:02,070
现在这个分数是 20 但它是

484
00:20:02,080 --> 00:20:04,470
仍然不会达到分数那么高

485
00:20:04,480 --> 00:20:07,669
100 所以这个特异性计算器

486
00:20:07,679 --> 00:20:10,390
一定会帮助您理解原因

487
00:20:10,400 --> 00:20:12,390
正在应用一项规则或为什么应用一项规则

488
00:20:12,400 --> 00:20:14,549
我应该说正在应用选择器

489
00:20:14,559 --> 00:20:16,710
记得继续努力

490
00:20:16,720 --> 00:20:19,110
为了进步而不是完美

491
00:20:19,120 --> 00:20:21,350
每天进步一点点就会走得很远

492
00:20:21,360 --> 00:20:22,549
很长的路

493
00:20:22,559 --> 00:20:24,149
如果是的话请给这个视频点个赞

494
00:20:24,159 --> 00:20:26,310
对您有帮助，感谢您的观看

495
00:20:26,320 --> 00:20:27,990
订阅你就是在帮助我

496
00:20:28,000 --> 00:20:29,190
渠道成长

497
00:20:29,200 --> 00:20:31,270
祝你有美好的一天，让我们写更多

498
00:20:31,280 --> 00:20:35,320
很快就会一起编码